<template>
  <up-navbar :bgColor="styleParam.bgColor" @leftClick="back()" :customStyle="{height:'100px'}">
    <template #right>
      <view></view>
    </template>
    <template #center>
      <view :style="{opacity: styleParam.opacity}">产品情报局</view>
    </template>
  </up-navbar>
  <scroll-view style="height: 100vh" scroll-y="true" show-scrollbar="false" @scroll="onScroll"
               @scrolltolower="loadMore" lower-threshold="100">
    <view class="page-container">
      <up-image src="/static/img/user-bg.png" width="100%" height="100%" class="planet-bg"></up-image>

      <!-- 使用页面滚动而非scroll-view -->
      <view class="content" :style="[{marginTop: styleParam.scrollTop+'rpx'}]">
        <view class="flex-between planet-title">
          <view style="font-weight: 600;font-size: 34rpx">产品情报局</view>
          <view class="u-f-sm">分享</view>
        </view>
        <view class="tabs">
          <up-tabs :list="categoryList"></up-tabs>
        </view>
        <view class="content-inner">
          <detail-card :data="[1,2,3,4,5,6,7,8,9,10]"></detail-card>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue';
import {back} from "@/util/router/router";
import {numberFormat} from "@/util/number";
import DetailCard from "@/planet/components/detail-card.vue";

const styleParam = ref({
  opacity: 0,
  bgColor: 'transparent',
  scrollTop: 500
})

const categoryList = ref([
  {
    name: "全部"
  },
  {
    name: "精华"
  },
  {
    name: "只看星主"
  },
])

const onScroll = (e) => {
  // styleParam.value.scrollTop -= e.detail.scrollTop
  styleParam.value.bgColor = `rgba(255,255,255,${(e.detail.scrollTop - 150) / 400})`
  styleParam.value.opacity = (e.detail.scrollTop - 200) / 400
  if (e.detail.scrollTop > 259) {
    styleParam.value.bgColor = `rgba(255, 255, 255, 1)`
    styleParam.value.opacity = 1
  }
}

const loadMore = () => {
  console.log('加载更多')
}
</script>

<style scoped>
@import "@/static/css/index.css";

.page-container {
  min-height: 100vh;
  position: relative;
}

/* 内容区域 - 初始状态 */
.content {
  background: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  transition: all 0.3s ease;
  width: 100%;
  height: 100%;
}

.content-inner {
  padding: 20rpx;
  background: #fff;
}

.img-list:last-child {
  margin-right: auto;
}

.planet-title {
  padding: 30rpx;
  background: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;

}

.item-time {
  color: rgba(0, 0, 0, 0.3);
  margin-top: 10rpx;
}

.tabs {
  position: sticky;
  // #ifdef H5||MP-WEIXIN
  top: 44px;
  // #endif
  // #ifdef APP
  top: 130rpx;
  // #endif
  z-index: 1000;
  background: #fff;
}
</style>